import React, { Component, useState, useEffect } from 'react'
import { Pagination, Select, Modal, Button, Form, Input } from 'antd'
const { Option } = Select

const MyModal = (props) => {
  const [form] = Form.useForm() // FormInstance
  // 测试数据
  // const [data, setData] = useState({ itemClass: '1910A', className: '6346', course: 'react开发' })
  const { data, isModalVisible, handleOk, handleCancel } = props

  useEffect(() => {
    form.setFieldsValue(data)
  }, [data])

  const handleChange = (value) => {
    console.log(value)
  }
  return (
    <Modal
      forceRender
      title="我是弹出框"
      onOk={() => {
        handleOk && handleOk(form.getFieldsValue())
      }}
      onCancel={handleCancel}
      visible={isModalVisible}
    >
      <Form initialValues={{ ...data }} form={form}>
        <Form.Item name={'itemClass'} label="班级名字">
          <Input type="text" />
        </Form.Item>
        <Form.Item name={'className'} label="教室名字">
          <Select onChange={handleChange}>
            <Option value="6346">6346</Option>
            <Option value="6347">6347</Option>
            <Option value="6348">6348</Option>
          </Select>
        </Form.Item>
        <Form.Item name={'course'} label="课程名字">
          <Select onChange={handleChange}>
            <Option value="js下">js下</Option>
            <Option value="js上">js上</Option>
            <Option value="react开发">react开发</Option>
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default MyModal
